配置 |
您所在的位置：网站首页 › webpack 配置 别名 › 配置 |
|
webpack 开箱即用，可以无需使用任何配置文件。然而，webpack 会假定项目的入口起点为 src/index.js，然后会在 dist/main.js 输出结果，并且在生产环境开启压缩和优化。 tipcreateapp.dev 是一个创建自定义 webpack 配置的在线工具。它允许你选择各种特性，其将会被添加到最后的配置文件中。它也会基于生成的 webpack 配置初始化一个示例项目，你可以在浏览器中查看该项目并且下载。 通常你的项目还需要继续扩展此能力，为此你可以在项目根目录下创建一个 webpack.config.js 文件，然后 webpack 会自动使用它。 下面指定了所有可用的配置选项。 tip刚开始学习 webpack？请查看我们提供的指南，从 webpack 一些 核心概念 开始学习吧！ 使用不同的配置文件如果出于某些原因，需要根据特定情况使用不同的配置文件，则可以通过在命令行中使用 --config 标志修改。 package.json "scripts": { "build": "webpack --config prod.config.js" }选项点击下面配置代码中每个选项的名称，跳转到详细的文档。还要注意，带有箭头的项目可以展开，以显示更多示例，在某些情况下可以看到高级配置。 tip注意整个配置中我们使用 Node 内置的 path 模块，并在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。更多「POSIX 和 Windows」的相关信息请查看 此章节。 warningNotice that many array configurations allow to reference the default value via "...". webpack.config.js const path = require('path'); module.exports = { mode: "production", // "production" | "development" | "none" // Chosen mode tells webpack to use its built-in optimizations accordingly. entry: "./app/entry", // string | object | array // 默认为 ./src // 这里应用程序开始执行 // webpack 开始打包 output: { // webpack 如何输出结果的相关选项 path:path.resolve(__dirname, "dist"), // string (default) // 所有输出文件的目标路径 // 必须是绝对路径（使用 Node.js 的 path 模块） filename: "[name].js", // string (default) // entry chunk 的文件名模板 publicPath: "/assets/", // string // 输出解析文件的目录，url 相对于 HTML 页面 library: { // 这里有一种旧的语法形式可以使用（点击显示） type: "umd", // 通用模块定义 // the type of the exported library name: "MyLibrary", // string | string[] // the name of the exported library /* Advanced output.library configuration (click to show) */ }, uniqueName: "my-application", // (defaults to package.json "name") // unique name for this build to avoid conflicts with other builds in the same HTML name: "my-config", // name of the configuration, shown in output /* 高级输出配置（点击显示） */ /* Expert output configuration 1 (on own risk) */ /* Expert output configuration 2 (on own risk) */ }, module: { // 模块配置相关 rules: [ // 模块规则（配置 loader、解析器等选项） { // Conditions: test: /\.jsx?$/, include: [ path.resolve(__dirname, "app") ], exclude: [ path.resolve(__dirname, "app/demo-files") ], // these are matching conditions, each accepting a regular expression or string // test and include have the same behavior, both must be matched // exclude must not be matched (takes preferrence over test and include) // Best practices: // - Use RegExp only in test and for filename matching // - Use arrays of absolute paths in include and exclude to match the full path // - Try to avoid exclude and prefer include // Each condition can also receive an object with "and", "or" or "not" properties // which are an array of conditions. issuer: /\.css$/, issuer: path.resolve(__dirname, "app"), issuer: { and: [ /\.css$/, path.resolve(__dirname, "app") ] }, issuer: { or: [ /\.css$/, path.resolve(__dirname, "app") ] }, issuer: { not: [ /\.css$/ ] }, issuer: [ /\.css$/, path.resolve(__dirname, "app") ], // like "or" // conditions for the issuer (the origin of the import) /* Advanced conditions (click to show) */ // Actions: loader: "babel-loader", // 应该应用的 loader，它相对上下文解析 options: { presets: ["es2015"] }, // options for the loader use: [ // apply multiple loaders and options instead "htmllint-loader", { loader: "html-loader", options: { // ... } } ], type: "javascript/auto", // specifies the module type /* Advanced actions (click to show) */ }, { oneOf: [ // ... (rules) ] // only use one of these nested rules }, { // ... (conditions) rules: [ // ... (rules) ] // use all of these nested rules (combine with conditions to be useful) }, ], /* 高级模块配置（点击展示） */ }, resolve: { // options for resolving module requests // (does not apply to resolving of loaders) modules: ["node_modules",path.resolve(__dirname, "app")], // directories where to look for modules (in order) extensions: [".js", ".json", ".jsx", ".css"], // 使用的扩展名 alias: { // a list of module name aliases // aliases are imported relative to the current context "module": "new-module", // 别名："module" -> "new-module" 和 "module/path/file" -> "new-module/path/file" "only-module$": "new-module", // 别名 "only-module" -> "new-module"，但不匹配 "only-module/path/file" -> "new-module/path/file" "module": path.resolve(__dirname, "app/third/module.js"), // alias "module" -> "./app/third/module.js" and "module/file" results in error "module": path.resolve(__dirname, "app/third"), // alias "module" -> "./app/third" and "module/file" -> "./app/third/file" [path.resolve(__dirname, "app/module.js")]: path.resolve(__dirname, "app/alternative-module.js"), // alias "./app/module.js" -> "./app/alternative-module.js" }, /* 可供选择的别名语法（点击展示） */ /* 高级解析选项（点击展示） */ /* Expert resolve configuration (click to show) */ }, performance: { hints: "warning", // 枚举 maxAssetSize: 200000, // 整数类型（以字节为单位） maxEntrypointSize: 400000, // 整数类型（以字节为单位） assetFilter: function(assetFilename) { // 提供资源文件名的断言函数 return assetFilename.endsWith('.css') || assetFilename.endsWith('.js'); } }, devtool: "source-map", // enum // 通过为浏览器调试工具提供极其详细的源映射的元信息来增强调试能力， // 但会牺牲构建速度。 context: __dirname, // string（绝对路径！） // webpack 的主目录 // entry 和 module.rules.loader 选项 // 都相对于此目录解析 target: "web", // 枚举 // the environment in which the bundle should run // changes chunk loading behavior, available external modules // and generated code style externals: ["react", /^@angular/], // Don't follow/bundle these modules, but request them at runtime from the environment externalsType: "var", // (defaults to output.library.type) // Type of externals, when not specified inline in externals externalsPresets: { /* ... */ }, // presets of externals ignoreWarnings: [/warning/], stats: "errors-only", stats: { // lets you precisely control what bundle information gets displayed preset: "errors-only", // A stats preset /* Advanced global settings (click to show) */ env: true, // include value of --env in the output outputPath: true, // include absolute output path in the output publicPath: true, // include public path in the output assets: true, // show list of assets in output /* Advanced assets settings (click to show) */ entrypoints: true, // show entrypoints list chunkGroups: true, // show named chunk group list /* Advanced chunk group settings (click to show) */ chunks: true, // show list of chunks in output /* Advanced chunk group settings (click to show) */ modules: true, // show list of modules in output /* Advanced module settings (click to show) */ /* Expert module settings (click to show) */ /* Advanced optimization settings (click to show) */ children: true, // show stats for child compilations logging: true, // show logging in output loggingDebug: /webpack/, // show debug type logging for some loggers loggingTrace: true, // show stack traces for warnings and errors in logging output warnings: true, // show warnings errors: true, // show errors errorDetails: true, // show details for errors errorStack: true, // show internal stack trace for errors moduleTrace: true, // show module trace for errors // (why was causing module referenced) builtAt: true, // show timestamp in summary errorsCount: true, // show errors count in summary warningsCount: true, // show warnings count in summary timings: true, // show build timing in summary version: true, // show webpack version in summary hash: true, // show build hash in summary }, devServer: { proxy: { // proxy URLs to backend development server '/api': 'http://localhost:3000' }, static: path.join(__dirname, 'public'), // boolean | string | array | object, static file location compress: true, // enable gzip compression historyApiFallback: true, // true for index.html upon 404, object for multiple paths hot: true, // hot module replacement. Depends on HotModuleReplacementPlugin https: false, // true for self-signed, object for cert authority // ... }, experiments: { asyncWebAssembly: true, // WebAssembly as async module (Proposal) syncWebAssembly: true, // WebAssembly as sync module (deprecated) outputModule: true, // Allow to output ESM topLevelAwait: true, // Allow to use await on module evaluation (Proposal) }, plugins: [ // ... ], // list of additional plugins optimization: { chunkIds: "size", // method of generating ids for chunks moduleIds: "size", // method of generating ids for modules mangleExports: "size", // rename export names to shorter names minimize: true, // minimize the output files minimizer: [new CssMinimizer(), "..."], // minimizers to use for the output files /* Advanced optimizations (click to show) */ splitChunks: { cacheGroups: { "my-name": { // define groups of modules with specific // caching behavior test: /\.sass$/, type: "css/mini-extract", /* Advanced selectors (click to show) */ /* Advanced effects (click to show) */ } }, fallbackCacheGroup: { /* Advanced (click to show) */ } /* Advanced selectors (click to show) */ /* Advanced effects (click to show) */ /* Expert settings (click to show) */ } }, /* 高级配置（点击展示） */ /* Advanced caching configuration (click to show) */ /* Advanced build configuration (click to show) */ }warning在应用 插件默认值 之后，webpack 将应用配置默认值。 为了快速生成符合项目要求的 webpack 配置文件，在使用 webpack-cli 的 init 命令时，会在创建配置文件之前会询问你几个问题。 npx webpack-cli init如果尚未在项目或全局安装 @webpack-cli/init，npx 可能会提示你安装。根据你在配置生成过程中的选择，你也可能会安装额外的 package 到你的项目中。 npx webpack-cli init ℹ INFO For more information and a detailed description of each question, have a look at https://github.com/webpack/webpack-cli/blob/master/INIT.md ℹ INFO Alternatively, run `webpack(-cli) --help` for usage info. ? Will your application have multiple bundles? No ? Which module will be the first to enter the application? [default: ./src/index] ? Which folder will your generated bundles be in? [default: dist]: ? Will you be using ES2015? Yes ? Will you use one of the below CSS solutions? No + [email protected] + [email protected] + [email protected] + @babel/[email protected] + [email protected] + @babel/[email protected] + [email protected] added 124 packages from 39 contributors, updated 4 packages and audited 25221 packages in 7.463s found 0 vulnerabilities Congratulations! Your new webpack configuration file has been created! |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |